<template>
    <div class="main">
        <div class="top">
            <div class="top__left">
               <span style="color:white;font-size: 25px;margin-left: 70px;font-weight: 700;">趣写管理平台</span>
            </div>
            <el-icon @click="quit()" style="color: white;margin-right:90px;font-size: 20px;cursor: pointer;"><SwitchButton /></el-icon>
        </div>
        <div class="main-body">
            <div class="left">
                <p class="recommend-title">菜单</p>
                <div class="navigation">
                    <router-link v-for="item in filteredNavItems" :key="item.path" :to="item.path" class="nav-link"
                        active-class="active">
                        <div class="nav-item">
                            <svg class="nav-icon" :viewBox="item.viewBox">
                                <path :d="item.pathD" fill="currentColor" />
                                <path v-if="item.pathD2" :d="item.pathD2" fill="currentColor" />
                            </svg>
                            <span>{{ item.text }}</span>
                        </div>
                    </router-link>
                </div>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch,onMounted } from 'vue';
import {SwitchButton} from '@element-plus/icons-vue'
import router from '@/router';
import { ElMessageBox ,ElNotification} from 'element-plus';
import config from '../../../public/config.js'





const navItems = [
    {
        path: '/show',
        text: '仪表盘',
        viewBox: '0 0 1024 1024',
        pathD: 'M645.8368 533.4016a250.368 250.368 0 1 0-267.6736 0A411.4432 411.4432 0 0 0 101.2224 921.6a30.72 30.72 0 0 0 61.44 0 349.3376 349.3376 0 0 1 698.624 0 30.72 30.72 0 0 0 61.44 0 411.4432 411.4432 0 0 0-276.8896-388.1984z m-322.56-211.4048A188.928 188.928 0 1 1 512 510.9248a189.1328 189.1328 0 0 1-188.928-188.928z',
        pathD2: 'M512 656.896a35.84 35.84 0 0 0-35.84 35.84v164.1984a35.84 35.84 0 0 0 71.68 0V692.736a35.84 35.84 0 0 0-35.84-35.84z'
    },
    {
        path: '/user',
        text: '用户',
        viewBox: '0 0 1024 1024',
        viewBox: '0 0 1024 1024',
        pathD: 'M645.8368 533.4016a250.368 250.368 0 1 0-267.6736 0A411.4432 411.4432 0 0 0 101.2224 921.6a30.72 30.72 0 0 0 61.44 0 349.3376 349.3376 0 0 1 698.624 0 30.72 30.72 0 0 0 61.44 0 411.4432 411.4432 0 0 0-276.8896-388.1984z m-322.56-211.4048A188.928 188.928 0 1 1 512 510.9248a189.1328 189.1328 0 0 1-188.928-188.928z',
        pathD2: 'M512 656.896a35.84 35.84 0 0 0-35.84 35.84v164.1984a35.84 35.84 0 0 0 71.68 0V692.736a35.84 35.84 0 0 0-35.84-35.84z'
    },
    {
        path: '/article',
        text: '文章',
        viewBox: '0 0 1024 1024',
        pathD: 'M645.8368 533.4016a250.368 250.368 0 1 0-267.6736 0A411.4432 411.4432 0 0 0 101.2224 921.6a30.72 30.72 0 0 0 61.44 0 349.3376 349.3376 0 0 1 698.624 0 30.72 30.72 0 0 0 61.44 0 411.4432 411.4432 0 0 0-276.8896-388.1984z m-322.56-211.4048A188.928 188.928 0 1 1 512 510.9248a189.1328 189.1328 0 0 1-188.928-188.928z',
        pathD2: 'M512 656.896a35.84 35.84 0 0 0-35.84 35.84v164.1984a35.84 35.84 0 0 0 71.68 0V692.736a35.84 35.84 0 0 0-35.84-35.84z'
    },
    {
        path: '/notis',
        text: '公告',
        viewBox: '0 0 1024 1024',
        pathD: 'M645.8368 533.4016a250.368 250.368 0 1 0-267.6736 0A411.4432 411.4432 0 0 0 101.2224 921.6a30.72 30.72 0 0 0 61.44 0 349.3376 349.3376 0 0 1 698.624 0 30.72 30.72 0 0 0 61.44 0 411.4432 411.4432 0 0 0-276.8896-388.1984z m-322.56-211.4048A188.928 188.928 0 1 1 512 510.9248a189.1328 189.1328 0 0 1-188.928-188.928z',
        pathD2: 'M512 656.896a35.84 35.84 0 0 0-35.84 35.84v164.1984a35.84 35.84 0 0 0 71.68 0V692.736a35.84 35.84 0 0 0-35.84-35.84z'
    }
]


const filteredNavItems = computed(() => {
    return navItems.filter(item => {
        return true
    })
})


function quit(){
    ElMessageBox.confirm('确定要退出吗', '退出', {
        confirmButtonText: '退出',
        cancelButtonText: '点错了',
        distinguishCancelAndClose: true,
        type: 'warning',
    })
        .then(() => {
            localStorage.removeItem("username")
            localStorage.removeItem("token")
            localStorage.removeItem("tokenExpiry")
            localStorage.removeItem("userId")
            router.push('/')
            ElNotification({
                title: '退出',
                message: '退出成功',
                type: 'success',
                showClose: false,
            })
        })
        .catch((action) => {
            ElNotification({
                title: '退出',
                message: '取消退出',
                type: 'warning',
                showClose: false,
            })
        });
}
</script>

<style scoped>
.main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: transform 0.05s ease;
    will-change: transform;
    overflow: hidden;
}

.top {
    width: 100%;
    height: 80px;
    background-color: rgb(0, 21, 41);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    -webkit-app-region: drag;
    user-select: none;
    flex-shrink: 0;
}

.top__left {
    display: flex;
    align-items: center;
}

.top__logo {
    width: 40%;
    height: 40%;
}

.top__back-icon {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.main-body {
    width: 100%;
    height: calc(100vh - 160px);
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
}

.left {
    width: 15%;
    height: 100%;
    padding: 20px 0;
    background: #fafafa;
}

.right {
    width: 85%;
    height: 100%;
}

.recommend-title {
    font-size: 15px;
    font-weight: 500;
    color: #8a8a8a;
    padding: 0 20px;
    margin-bottom: 15px;
}

.nav-link {
    text-decoration: none;
    color: #666;
    transition: all 0.3s ease;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    transition: all 0.3s ease;
    border-radius: 10px;
}

.nav-item:hover {
    background: #f0f0f0;
}

.nav-icon {
    height: 20px;
    width: 20px;
    margin-right: 12px;
}

.active {
    color: #d23d2e;
}

.active .nav-item {
    background: #f6e5e3;
}

.active .nav-icon {
    color: #d23d2e;
}
</style>
